<!--
@File    : 本地存储localStorage.html
@Time    : 2019/6/5 16:35
@Author  : wangshunqing
@Email   : wangshunqing@yihuacomputer.com
@Software: WebStorm
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>本地存储localStorage</title>
    <script src="lib/vue@2.6.10.js"></script>
    <script src="./lib/vuex@3.1.1.js"></script>
    <script src="./lib/vue-router@3.0.6.js"></script>
</head>
<style>
    #app {
        margin: 50px auto;
        width: 600px;
    }
    fieldset {
        border: 1px solid orangered;
        margin-bottom: 20px;
    }
    fieldset input {
        width: 200px;
        height: 30px;
        margin: 10px 0;
    }
    table {
        width: 600px;
        border: 2px solid orangered;
        text-align: center;
    }

    thead {
        background-color: orangered;
    }
</style>
<body>
<div id="app">
    <!--第一部分-->
    <fieldset>
        <legend>本地化存储示例</legend>
        <div>
            <span>姓名:</span>
            <input type="text" placeholder="请输入姓名" v-model="newStudent.name">
        </div>
        <div>
            <span>年龄:</span>
            <input type="text" placeholder="请输入年龄" v-model="newStudent.age">
        </div>
        <div>
            <span>性别:</span>
            <select v-model="newStudent.sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <span>手机:</span>
            <input type="text" placeholder="请输入手机号码" v-model="newStudent.phone">
        </div>
        <button @click="createNewStu()">创建新用户</button>
    </fieldset>
    <!--第二部分-->
    <table>
        <thead>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>手机</td>
            <td>删除</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(stu, index) in students" :key="index">
            <td>{{stu.name}}</td>
            <td>{{stu.sex}}</td>
            <td>{{stu.age}}</td>
            <td>{{stu.phone}}</td>
            <td>
                <button @click="delStudent(stu.id)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        mounted(){
            this.getStudentList();
        },
        data: {
            students: [],
            newStudent: {name: '', sex: '男', age: 0, phone: ''}
        },
        methods: {
            // 获取学生列表
            getStudentList(){
                this.students = JSON.parse(window.localStorage.getItem('students') || '[]');
            },
            // 插入记录
            createNewStu(){
                // 1. 姓名不能为空
                if(this.newStudent.name === ''){
                    alert('姓名不能为空!');
                    return;
                }

                // 2. 验证年龄
                if(this.newStudent.age <= 0){
                    alert('请输入正确的年龄!');
                    return;
                }

                // 3. 验证手机
                if(this.newStudent.phone === ''){
                    alert('请输入正确的手机号码!');
                    return;
                }

                // 4. 插入新纪录
                this.students.unshift(this.newStudent);
                localStorage.setItem('students', JSON.stringify(this.students));


                // 5. 清空数据
                this.newStudent = {name: '', sex: '男', age: 0, phone: ''}
            },
            // 删除记录
            delStudent(index){
                this.students.splice(index, 1);
                localStorage.setItem('students', JSON.stringify(this.students));
            }
        }
    });
</script>
</html>